<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>考试结果</title>
		<link rel="shortcut icon" href="#" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../layui/layui.js"></script>
		<script type="text/javascript" src="../js/axios.min.js"></script>
		<script type="text/javascript" src="../js/QS.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style>
			* {
				font-size: 20px;
			}
			#app {
				width: 1000px;
				height: 800px;
				margin: 10px auto;
				border: 3px solid whitesmoke;
				overflow: auto;
			}
			.same,
			.important,
			.error {
				color: red;
			}
		
			.correct {
				color: green;
			}
			
			.question {
				border: 5px solid whitesmoke;
				margin-top: 10px;
			}
			h1{
				margin-top: 10px;
				margin-left: 888px;
				color: #0094ff;
			}
			#content{
				margin-left: 20px;
			}
		</style>
	</head>

	<body>
		<h1>考试结果</h1>
		<div id="app">
			<div align="center">
				<span>总分:</span><span class="same">{{paper.totalScore}}</span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>你的分数:</span><span class="same">{{exam.examScore}}</span>
			</div>

			<div class="question" v-for="(p,index) in paper.questionList">
				<div id="content">
					<p>{{index+1}}.<span v-html="p.questionContent"></span></p>
					<p>A、<span v-html="p.answerA"></span></p>
					<p>B、<span v-html="p.answerB"></span></p>
					<p>C、<span v-html="p.answerC"></span></p>
					<p>D、<span v-html="p.answerD"></span></p>
					<p class="important">解析：<span v-html="p.analyse"></span></p>
					<div>
						你的答案：<span>{{stuAnswers[index].option}}</span> 正确答案：
						<span class="important">{{p.correctAnswer}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<div v-if="stuAnswers[index].option == p.correctAnswer">
							<span class="correct">正确</span>
						</div>
						<div v-else-if="stuAnswers[index].option != p.correctAnswer">
							<span class="error">错误</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<button type="button" class="layui-btn layui-btn-normal" onclick="reback()" style="margin-left: 888px;">返回</button>
	</body>
	<script>
		layui.use(["form", "table", "layer", "laydate"], function(form, table, layer, laydate) {
			//获取跳转过来的试卷编号
			var params = getParams();
			var examNo = params.examNo;
			var userId = params.userId;
			var app = new Vue({
				el: "#app",
				data: {
					paper: {},
					exam: {},
					stuAnswers: []
				},
				mounted() {
					var that = this;
					//根据试卷编号获取批改后的试卷信息
					axios({
							method: 'get',
							url: '/exams/' + userId,
							baseURL: serverPath,
							params: {
								examNo: examNo
							},
							headers: {
								"auth-token": getToken()
							},
							withCredentials: true,
							responseType: 'json',
						}).then(function(response) {
							console.log(response.data.data)
							//将请求的数据源赋值给vue对象中的数据
							that.paper = response.data.data.paper;
							that.exam = response.data.data.exam;
							//转换为json对象
							that.stuAnswers = JSON.parse(that.exam.stuAnswers);
							console.log(that.stuAnswers)
						})
						.catch(function(error) {
							layer.alert(error.response.data.error)
						});
				}
			})


			//返回主页面
			window.reback = function() {
				location.href = "main.html";
			}

		});
	</script>

</html>
